<template>
	<view>
		<view class="cover-view" @click="colseAll()" :style="domInfo[0] && domInfo[0].status ? '' : 'display:none' ">
		</view>
		<view class="gt-drop-list" :class="dropListClass" ref="dropList" id="dropList">
			<view class="row " @click="changeDomInfo()">
				<view v-if="type == 'search'" class="col-auto t-row-1 mr-10" :class=" name ? '' : 'c-secondary'">
					<input class="input pointer" style="padding: 0;" v-model="name" :placeholder="placeholder"
						:disabled="type == 'search' ? false  : true" @input="listenSearchInput" @blur="listenSearchInputOut" />
				</view>
				<view v-else class="col-auto t-row-1 mr-10" :class=" name ? '' : 'c-secondary'">
					{{ name || placeholder }}
				</view>
				<view class="iconfont icon-unfold"></view>
			</view>
			<view class="gt-drop-list-box" 
				:class="domInfo[0] && domInfo[0].status && listArray[0].length >0 ? 'show' :'' ">
				<view class="triangle-up"></view>
				<view class="" style="display: flex;flex-flow: row nowrap;">
					<view class="drop-column" v-for="(items,index) in listArray" :key="index">
						<view class="drop-row"
							:style="domInfo[index] && domInfo[index].status && domInfo[index].select === rowIndex ? 'color:#409EFF':''"
							v-for="(row,rowIndex) in items" :key="rowIndex" @mousemove="domMove(index,rowIndex)"
							@click="selectRow(index,rowIndex)">
							<view class="drop-name">
								<text>{{row.val}}</text>
							</view>
							<view class="drop-right">
								<uni-icons type="right" v-if="parentKeyArr.indexOf(row.key) != -1"
									:color="domInfo[index] && domInfo[index].status && domInfo[index].select === rowIndex ? '#409EFF':''">
								</uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "gt-drop-list",
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			value: {
				type: [Number, String],
				default: function() {
					return ''
				}
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			list: {
				type: [Array, Object],
				default: function() {
					return {};
				}
			},
			url: {
				type: String,
				default: function() {
					return '';
				}
			},
			type: {
				type: String,
				default: function() {
					return 'default';
				}
			},
			dropListClass: {
				type: String,
				default: function() {
					return 'input-line';
				}
			}

		},
		created() {
			
			
		},
		data() {
			return {
				name: '',
				domInfo: [],
				parentKeyArr: [],
				searchList:[],
			}
		},
		computed: {
			listArray() {
				if (this.type == 'search') {
					var arr = this.searchList;
				} else {
					var arr = [{
						key: '',
						val: this.placeholder
					}];
				}

				for (var i in this.list) {
					let row = this.list[i];
					if (typeof row == 'object' && row.key !== undefined && row.val !== undefined) {
						if (!row.parent_key) {
							arr.push(row);
						}
						if (row.key === this.value) {
							this.name = row.val;
						}
						if (row.parent_key && this.parentKeyArr.indexOf(row.parent_key) == -1) {
							this.parentKeyArr.push(row.parent_key);
						}
					} else {
						arr.push({
							key: i,
							val: row
						});
						if (i === this.value) {
							this.name = row;
						}
					}
				}
				return [arr];
			}
		},
		mounted(){
			// const query = uni.createSelectorQuery().in(this);
			// query.select('#dropList').boundingClientRect(data => {
			// 	console.log(JSON.stringify(data));
			// }).exec();
		},
		methods: {
			listenSearchInput(e) {
				let value = e.detail.value;
				if(!value){
					this.searchList = [];
					this.$emit('change', '');
					return false;
				}
				let _this = this;
				if (value) {
					this.$get({
						url: this.url + value,
						afterFun(res) {
							if (res) {
								_this.searchList = res;
							}
						}
					});
				}
			},
			
			listenSearchInputOut(e){
				this.name = this.value;
			},
			changeDomInfo(index = 0, rowIndex = 0) {
				
				
				
				let domInfo = this.domInfo;
				let status = domInfo[index] && domInfo[index].status ? true : false;
				let obj = {
					status: !status,
					select: rowIndex
				}
				domInfo[index] = obj;
				this.domInfo = [];
				this.domInfo = domInfo;
			},
			selectRow(index, rowIndex) {
				let key = this.listArray[index][rowIndex].key;
				if (this.parentKeyArr.indexOf(key) != -1 && this.type == 'default') {
					return false;
				}
				if(String(key).replace(/(^\s*)|(\s*$)/g, "").length == 0){
					this.$emit('change', '');
				}else{
					this.$emit('change', key);
				}
				let val = this.listArray[index][rowIndex].val;
				this.name = val || '';
				this.searchList = [];
				this.colseAll();
			},
			colseAll() {
				let domInfo = this.domInfo;
				for (let i in domInfo) {
					domInfo[i].status = false;
				}
				this.domInfo = [];
				this.domInfo = domInfo;
			},
			domMove(index, rowIndex) {
				let key = this.listArray[index][rowIndex].key;
				if (this.parentKeyArr.indexOf(key) != -1) {
					let arr = [];
					for (var i in this.list) {
						let row = this.list[i];
						if (row.parent_key == key) {
							arr.push(row);
						}
					}
					this.listArray[index + 1] = arr;
					this.changeDomInfo(index + 1, null);
				}
				let domInfo = this.domInfo;
				domInfo[index].select = rowIndex;
				this.domInfo = [];
				this.domInfo = domInfo;

			}
		}
	}
</script>

<style>
	.cover-view {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
	}

	.gt-drop-list {
		position: relative;
		cursor: pointer;
	}

	.drop-list-positon {
		position: absolute;
		z-index: 9999;
	}

	.drop-list-content {
		padding: 5px 0;
		max-height: 300px;
		background-color: white;
		box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .3);
		border-radius: 3px;
		height: 0;
	}

	.drop-list-row {
		padding: 0 15px 0 20px;
		line-height: 38px;
	}

	.drop-list-row-active {
		color: #409EFF;
	}

	.drop-list-row:hover {
		background-color: #f2faff;
	}

	.show-drop-list {
		height: auto;
	}

	.hide-drop-list {
		height: 0;
		overflow: hidden;
	}



	.triangle-left {
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-right: 10px solid #ffffff;
		border-bottom: 5px solid transparent;
		position: absolute;
		left: -8px;
		top: 16px;
		z-index: 999;
		filter: drop-shadow(-1px 0px rgba(0, 0, 0, .2))
	}

	.triangle-up {
		width: 0;
		height: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid #ffffff;
		position: absolute;
		left: 50px;
		top: -6px;
		z-index: 999;
		filter: drop-shadow(0px -1px rgba(0, 0, 0, .1))
	}

	.gt-drop-list-box {
		position: absolute;
		top: 48px;
		left: -1px;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
		box-sizing: border-box;
		border-radius: 3px;
		z-index: 9999;
		max-height: 0;
		overflow: hidden;
	}

	.show {
		max-height: 248px;
		/* overflow: visible !important; */
		animation: showList 0.3s;
	}


	@keyframes showList {
		from {
			max-height: 0;
			overflow: hidden;
		}

		to {
			max-height: 248px;
			/* overflow: visible !important; */
		}
	}

	.drop-column {
		padding: 10px 0;
		max-height: 248px;
		border-right: 1px solid #eeeeee;
		overflow-y: auto;
	}

	.drop-row {
		padding: 0 20px;
		width: auto;
		display: flex;
		flex-flow: row nowrap;
		padding-right: 38px;
		position: relative;
	}

	.drop-row:hover {
		background-color: #f2faff;
	}

	.drop-name {
		max-width: 180px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.drop-right {
		position: absolute;
		right: 20px;
		top: 0;
		text-align: center;
	}
</style>
